<form [formGroup]="myForm" style="color: white;">
    <div class="form-group">
        <label for="id">序号</label>
        <input type="email" class="form-control" id="id" name="id" [formControl]='id'>
    </div>
    <div class="form-group">
        <label for="productName">产品名</label>
        <input type="text" class="form-control" id="productName" name="productName" [formControl]='productName'>
    </div>
    <div class="form-group">
        <label for="price">产品价格</label>
        <input type="text" class="form-control" id="price" name="price" [formControl]='price'>
    </div>
</form>
<div>
    <button type="button" class="btn btn-success bt-content" (click)="add()">添加</button>
    <button type="button" class="btn btn-secondary bt-content" (click)="update()">修改</button>
    <button type="button" class="btn btn-info bt-content" (click)="IdSearch()">ID查找</button>
    <button type="button" class="btn btn-info bt-content" (click)="productNameSearch()">用户名查找</button>
    <button type="button" class="btn btn-danger bt-content" (click)="delete()">删除</button>
</div>
<table class="table table-striped" style="color: white;">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">序号</th>
            <th scope="col">产品名</th>
            <th scope="col">产品价格</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor='let product of products$ | async; let i=index ' (click)="select(product)">
            <th scope="row">{{i}}</th>
            <td>{{product.id}}</td>
            <td>{{product.productName}}</td>
            <td>{{product.price}}</td>
        </tr>
    </tbody>
</table>